<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品查询</title>
    <link rel="stylesheet" href="/goodsManage/css/index.css">
    <script src="/goodsManage/js/jquery.min.js" ></script>

</head>
<body bgcolor="#606266">
<div id="app">
    <el-container>
        <el-header>
            <el-card class="box-card">
                <el-form ref="form" size="mini" label-position="left" :inline="true" :model="searchForm" label-width="55px">
                    <el-form-item label="品类">
                        <el-input clearable v-model="searchForm.goods_type" style="width: 182px" placeholder="请输入品类"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌">
                        <el-input clearable v-model="searchForm.goods_brand" style="width: 182px" placeholder="请输入品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="型号">
                        <el-input clearable v-model="searchForm.goods_model" style="width: 182px" placeholder="请输入型号"></el-input>
                    </el-form-item>
                    <el-form-item label="官旗价">
                        <el-input clearable v-model="searchForm.official_price_start" type="number" style="width: 100px"></el-input>-<el-input clearable v-model="searchForm.official_price_end" type="number" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item label="指导价">
                        <el-input clearable v-model="searchForm.guide_price_start" type="number" style="width: 100px"></el-input>-<el-input clearable v-model="searchForm.guide_price_end" type="number" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchData" >搜索</el-button>
                    </el-form-item>

                </el-form>
            </el-card>

        </el-header>
        <el-main>
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-card class="box-card">
                        <!--<div slot="header" class="clearfix">
                            <span>选择的商品</span>
                        </div>-->
                        <el-table
                                :data="selectData"
                                border
                                height="550"
                                style="width: 100%">
                            <el-table-column
                                    label="商品"
                                    >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id == '-1'" style="color: #5daf34">
                                        合计
                                    </span>
                                    <span v-if="scope.row.id != '-1'">
                                        {{scope.row.goods_type}}/
                                    {{scope.row.goods_brand}}/
                                    {{scope.row.goods_model}}
                                    </span>

                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="official_price"
                                    width="85"
                                    label="官旗价">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id == '-1'" style="color: #5daf34">
                                        ¥ {{scope.row.official_price}}
                                    </span>
                                    <span v-if="scope.row.id != '-1'">
                                        ¥ {{scope.row.official_price}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="guide_price"
                                    width="85"
                                    label="指导价">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id == '-1'" style="color: #5daf34">
                                        ¥ {{scope.row.guide_price}}
                                    </span>
                                    <span v-if="scope.row.id != '-1'">
                                        ¥ {{scope.row.guide_price}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70"
                            >
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.id !='-1'" type="primary" @click="removeGoods(scope.$index)" icon="el-icon-circle-close" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>

                <el-col :span="16">
                    <el-card class="box-card">
                        <el-table
                                :data="tableData"
                                border
                                height="550"
                                style="width: 100%">
                            <el-table-column
                                    prop="goods_type"
                                    label="品类"
                                    width="110">
                            </el-table-column>
                            <el-table-column
                                    prop="goods_brand"
                                    label="品牌"
                                    width="130">
                            </el-table-column>
                            <el-table-column
                                    prop="goods_model"
                                    label="型号">
                            </el-table-column>
                            <el-table-column
                                    prop="official_price"
                                    width="100"
                                    label="官旗价">
                                <template slot-scope="scope">
                                    ¥ {{scope.row.official_price}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="guide_price"
                                    width="100"
                                    label="指导价">
                                <template slot-scope="scope">
                                    ¥ {{scope.row.guide_price}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70"
                            >
                                <template slot-scope="scope">
                                    <el-button type="primary" @click="selectGoods(scope.row)" icon="el-icon-circle-check" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>



        </el-main>
    </el-container>
</div>
</body>
<script src="/goodsManage/js/vue.js"></script>
<!-- import JavaScript -->
<script src="/goodsManage/js/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                searchForm:{

                },
                selectData:[],
            }
        },
        mounted() {
            let goods_type = decodeURIComponent(this.getQueryVariable("goods_type"));
            if(goods_type != undefined && goods_type != null && goods_type != '' && goods_type != 'false'){
                console.log(goods_type);
                //this.searchForm.goods_type = goods_type;
                let params = {goods_type:goods_type};
                this.searchData(params);
            }

        },
        methods:{
            getQueryVariable(variable){
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            },
            searchData(params){
                let that = this;
                let param_tmp = JSON.stringify(that.searchForm);
                if(params != undefined && params != null){
                    param_tmp = JSON.stringify(params);
                    that.searchForm = params;
                }
                $.ajax({
                    type: 'post',
                    url: 'goods/list',
                    contentType: 'application/json;charset=utf-8',
                    data: param_tmp,
                    success: function (data) { //返回json结果
                        if(data.code == 200){
                            that.tableData = data.data;
                        }else{

                        }
                    }
                });
            },
            selectGoods(row){
                let len = this.selectData.length;
                if(len > 0){
                    this.selectData.splice(len - 1, 1);
                }
                this.selectData.push(row);
                let sum = {id:'-1',official_price:0,guide_price:0};
                for (var i = 0; i < this.selectData.length; i++) {
                    sum.official_price += this.selectData[i].official_price;
                    sum.guide_price += this.selectData[i].guide_price;
                }
                this.selectData.push(sum);
            },
            removeGoods(index){
                let len = this.selectData.length;
                if(len > 0){
                    this.selectData.splice(len - 1, 1);
                }
                this.selectData.splice(index, 1);
                let sum = {id:'-1',official_price:0,guide_price:0};
                for (var i = 0; i < this.selectData.length; i++) {
                    sum.official_price += this.selectData[i].official_price;
                    sum.guide_price += this.selectData[i].guide_price;
                }
                this.selectData.push(sum);

            },
        }
    })
</script>
</html>